<template>
  <div id="app">
    <div class="box" v-if="flag">
      <div class="M"><img src="./img/qd/logo.png" alt="" /></div>
      <div class="mws"><img src="./img/qd/logoFont.png" alt="" /></div>
      <div class="text">身 边 的 盲 盒 专 家</div>
      <div class="mark">
        <img src="./img/qd/mark.png" alt="" />
      </div>
    </div>
    <router-view v-if="!flag" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
    };
  },
  methods: {
    arise() {
      this.flag = true;
      setTimeout(() => {
        this.flag = false;
      }, 3000);
    },
  },
  created() {
    this.arise();
  },
};
</script>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
#app {
  width: 100%;
  height: 100%;
}
.box {
  width: 750px;
  height: 1622px;
  background: #cedaff;
  position: relative;
  .M {
    width: 145px;
    height: 159px;
    background: #cedaff;
    position: absolute;
    top: 382px;
    left: 300px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.mws {
  width: 263px;
  height: 82px;
  position: absolute;
  top: 543px;
  left: 244px;
  img {
    width: 100%;
    height: 100%;
  }
}
.text {
  font-size: 36px;
  font-weight: 300;
  color: #494949;
  position: absolute;
  top: 645px;
  left: 215px;
}
.mark {
  width: 377px;
  height: 529px;
  position: absolute;
  top: 906px;
  right: 0px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
